<template>
	<view class="page">
		<!-- 头部背景 -->
		<view class="head-bg" :style="{backgroundImage:`url(${comm_img_url+'/pro/qd-bg.png'})`,backgroundSize: '100% 100%',backgroundRepeat: 'no-repeat'}">
			<view class="sign-top">
				<view class="t1">已连续打卡 <text class="t-text">（今日未打卡）</text></view>
				<view class="t2">
					<view class="t1-bg" :style="{backgroundImage:`url(${comm_img_url+'/pro/t1.png'})`,backgroundSize: '100% 100%',backgroundRepeat: 'no-repeat'}">
						0
					</view>
				</view>
			</view>
			<view class="sign-header" :style="{backgroundImage:`url(${comm_img_url+'/pro/bg-q1.png'})`,backgroundSize: '100% 100%',backgroundRepeat: 'no-repeat'}">
				
			</view>
			<!-- 签到 -->
			<view class="Signin-data">
				<view class="signin-title">
					<view class="title">
						<!-- <text>每日签到</text> -->
					</view>
				</view>
				<view class="day-list">
					<view class="list" v-for="(item,index) in 7" 
					:class="{'action':index <= 4}"
					:key="index">
						<view class="circle">
							<text v-show="index > 4">+{{index+1}}</text>
							<text class="iconfont icon-duihao" v-show="index <= 4"></text>
						</view>
						<view class="day">
							<text>{{index+1}}天</text>
						</view>
						
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- 邀请新人 -->
		<view class="invitation-data">
			<view class="invitation-title">
				<view class="title">
					打卡记录<text>（每天坚持打卡，记录变美的过程~）</text>
				</view>
			</view>
			<view class="invitation-show">
				<!-- <view class="icon">
					<text class="iconfont icon-user"></text>
				</view> -->
				<view class="item flex-box">
					<view class="item1">第一天</view>
					<view class="item2">
						<image src="../../../static/mb-banner.png" mode=""></image>
					</view>
					<view class="item3 box-1">
						今天用了伊姿漾的洁面啫喱，洗完感觉不紧绷，清洁力...
					</view>
				</view>
			</view>
		</view>
		<!-- 签到提示弹窗 -->
		<view class="sigin-hint">
			<view class="cu-modal" :class="{'show':isSignin}">
			  <view class="cu-dialog">
			    <view class="cu-bar bg-white justify-end">
			      <view class="content">签到成功</view>
			      <view class="action">
			        <text class="cuIcon-close text-red" @click="isSignin = false"></text>
			      </view>
			    </view>
			    <view class="sigin-content">
						<view class="icon">
							<text class="iconfont icon-signin"></text>
						</view>
						<view class="title">
							<view>恭喜您，连续签到<text>3</text>天，获得<text>7</text>积分</view>
						</view>
						<view class="hint">
							<text>连续签到7天可获得额外奖励</text>
						</view>
						<view class="btn" @click="isSignin = false">
							<text>我知道了</text>
						</view>
					</view>
			  </view>
			</view>
		</view>
		<!-- 规则说明弹窗 -->
		<view class="rule-win">
			<view class="cu-modal" :class="{'show':isRule}">
			  <view class="cu-dialog">
			    <view class="cu-bar bg-white justify-end">
			      <view class="content">规则说明</view>
			      <view class="action">
			        <text class="cuIcon-close text-red" @click="isRule = false"></text>
			      </view>
			    </view>
			    <view class="rule-content">
						<text>
							1.签到第1天送5积分，连续签到第2天送6积分，以此类推，连续签到第7天可获额外红包奖励。第8天签到则重新开始-个七日轮回，视为首日签到;若签到中断则重新计算;
							2.在幸福集市任意门店内，可进行门店打卡，将获赠额外积分，每日1次机会;
							4.本活动的红包奖励、宝箱奖励均为优惠券形式，具体面额、有效时间、使用渠道以实际到账的优惠券为准;
							5.积分可在“积分明细”中查询，优惠券可在“会员-优惠券”中查看。
						</text>
					</view>
			  </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSignin: false,
				SigninStatus: 0,
				// 规则
				isRule: false,
				comm_img_url:'',
			};
		},
		onLoad() {
			this.comm_img_url = this.$c.appImg
		},
		methods:{
			/**
			 * 签到点击
			 */
			onIntegral(){
				this.isSignin = true;
				this.SigninStatus = 1;
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'SignIn.scss';
	.head-bg{
		width:750rpx;
		height:880rpx;
		padding:150rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;
		position:relative;
		/* 签到 */
		.Signin-data{
			position:absolute;
			bottom:50rpx;
			width: 690rpx;
			left:30rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			.signin-title{
				display: flex;
				align-items: center;
				padding: 0 4%;
				height: 100rpx;
				.title{
					display: flex;
					align-items: center;
					text{
						color: #222222;
						font-size: 28rpx;
						font-weight: bold;
					}
				}
			}
			.day-list{
				display: flex;
				align-items: center;
				padding: 0 4%;
				height: 200rpx;
				.list{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 14%;
					height: 100%;
					.circle{
						display: flex;
						align-items: center;
						justify-content: center;
						width: 60rpx;
						height: 60rpx;
						background-color: #EEEEEE;
						border-radius: 100%;
						text{
							font-size: 24rpx;
							color: #959595;
						}
					}
					.day{
						display: flex;
						align-items: center;
						justify-content: center;
						margin-top: 20rpx;
						text{
							font-size: 26rpx;
							color: #555555;
						}
					}
				}
				.action{
					.circle{
						background: $rgba-03;
						text{
							color: $base;
							font-weight: bold;
						}
					}
				}
			}
		}
		.sign-top{
			.t1{
				.t-text{
					font-size:24rpx;
					color:#8f8f8f;
				}
			}
			.t2{
				margin-bottom:30rpx;
				margin-top:20rpx;
				.t1-bg{
					width:72rpx;
					height:84rpx;
					line-height:84rpx;
					text-align: center;
					color:#fff;
					font-size:32rpx;
					font-weight: bold;
				}
			}
		}
		.sign-header{
			width:690rpx;
			height:470rpx;
			margin:0 auto;
		}
	}
</style>
